<template>
  <view class="main">
    <view class="top" :style="'backgroundColor:'+bgColor+''">
      <view class="top_main" :style="'backgroundColor:'+bgColor+''">
        <view :style="'width:'+leftWidth+'rpx'" class="left">
          <slot name="leftMain"></slot>
        </view>
        <view class="center">
          <slot name="centerMain"></slot>
        </view>
        <view class="right">
          <slot name="rightMain"></slot>
          <!--          <u-icon name="plus-circle-fill" color="white" size="28"></u-icon>
          <text>发布</text> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: ['bgColor', 'leftWidth'],
    data() {
      return {

      };
    },
    onReady() {
      console.log(this.leftWidth);
    },
    onLoad() {},
    methods: {
      // goSearch() {
      //   console.log(1);
      //   this.$Router.push("/pages/search/search")
      // },

    }
  }
</script>

<style lang="scss" scoped>
  .main {
    width: 100vw;
    // height: calc(100vh - 100rpx);

    .top {
      width: 100vw;
      /* #ifdef MP-WEIXIN */
      padding-top: calc(var(--status-bar-height) + 70rpx);
      /* #endif */
      /* #ifndef MP-WEIXIN */
      padding-top: calc(var(--status-bar-height));

      /* #endif */
      .top_main {
        width: 100vw;
        color: white;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: #c00000;
        padding: 0 30rpx 0 0rpx;
        box-sizing: border-box;

        .left,
        .right {
          width: 100rpx;
          height: 80rpx;
        }

        .left {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .center {
          width: calc(100vw - 180rpx);
          height: 60rpx;
          margin: 0 20rpx;
          display: flex;
          align-items: center;
          border-radius: 60rpx;
          background-color: black;
          text-indent: 10rpx;

          input {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

  }
</style>
